<template>
	<view class="content">
		<u-loading-icon :show="loading" style="margin-top: 50rpx;"></u-loading-icon>
		<template v-if="!loading">
			<u-row justify="space-between">
				<u-col span="3" class="time" style="justify-content: center;">
					<view>
						<u-text :text="time.hours+':'+time.minutes" bold size="35" align="center"></u-text>
						<u-text :text="time.year+'-'+time.month+'-'+time.day+lunar" align="center"></u-text>
					</view>
				</u-col>
				<u-col span="5.5" class="weather" style="flex-direction: row;" justify="around" align="center"
					@click="weatherPopup=true">
					<u-image :src="baseUrl+weatherInfo.weatherIcon" width="80" height="80" style="margin-left: 15rpx;"
						mode="widthFix"></u-image>
					<view style="border-right: 2rpx solid black; padding: 0 20rpx; margin-right: 10rpx;">
						<u-text :text="weatherInfo.cityName" bold size="20" align="center"></u-text>
						<u-text :text="weatherInfo.weather+'/'+weatherInfo.currentTemperature+'℃'"
							align="center"></u-text>
					</view>
					<u-text text="空气质量"></u-text>
					<u-text :text="weatherInfo.airQuality" color="lightgreen"></u-text>
				</u-col>
				<u-col span="3" class="air" style="flex-direction: row;">
					<u-col span="6" style="margin-left: 10rpx; margin-bottom: 10rpx;">
						<u-text text="空调状态" bold size="20"></u-text>
						<view>
							<u-text :text="airInfo.status?'已启动':'未启动'" size="13" :prefixIcon="airInfo.status?'●':'○'"
								:iconStyle="airInfo.status?'color:green':'color:black'"></u-text>
							<u-text :text="'温度'+airInfo.temperature+'℃风量2'" size="13" margin="0 0 0 9rpx"></u-text>
						</view>
					</u-col>
					<u-col span="6">
						<u-image src="@/static/desktop/air_content.png" width="100rpx" height="95rpx" mode="widthFix"
							style="position: absolute; right: 20rpx;"></u-image>
					</u-col>
				</u-col>
			</u-row>
			<u-row style="margin-top: 10rpx;">
				<u-col span="3.2" class="music" align="center">
					<u-image :src="baseUrl+musicList[musicIndex].previewImage" shape="circle" width="70rpx"
						height="70rpx" mode="widthFix" style="margin-top: 25rpx;"></u-image>
					<u-text :text="musicList[musicIndex].songName" bold size="20" align="center"
						style="flex: 0.5;"></u-text>
					<u-text :text="musicList[musicIndex].singer" align="center" style="flex: 0.1;"></u-text>
					<view style=" width: 83%;  margin: 10rpx 11rpx 10rpx 0;">
						<u-line-progress height="5" inactiveColor="#fff" activeColor="#6ab1fc"
							:percentage="lineProgress" :showText="false"></u-line-progress>
					</view>
					<view style="display: flex;">
						<u-icon name="rewind-left-fill" size="30" @click="previous"></u-icon>
						<u-icon :name="songStatus?'pause-circle-fill':'play-circle-fill'" size="30"
							style="margin: 0 20rpx;" @click="paly"></u-icon>
						<u-icon name="rewind-right-fill" size="30" @click="next"></u-icon>
					</view>
				</u-col>
				<u-col span="4" style="height: 250rpx;">
					<u-col class="video bgImg">
						<u-text text="多媒体播放器" bold align="center" size="20"></u-text>
					</u-col>
					<u-col class="info bgImg">
						<u-image src="@/static/desktop/car.png" width="200rpx" height="90rpx" mode="widthFix"
							style="margin: 25rpx;"></u-image>
					</u-col>
				</u-col>
				<u-col span="5" style="height: 250rpx;">
					<u-col class="carInfo bgImg" style="flex-direction: row;position: relative;" @click="goToCarInfo">
						<u-col offset="0.7" span="7">
							<u-text :text="'已安全伴你出行'+carInfo.numberOfTrips+'次'" style="flex: 0.7;"></u-text>
							<view style="display: flex;">
								<u-image src="@/static/desktop/distance.png" width="25rpx" height="25rpx"></u-image>
								<u-text :text="carInfo.kilometresTravelled+'KM'" size="12"></u-text>
							</view>
							<view style="display: flex;">
								<u-image src="@/static/desktop/temperature.png" width="25rpx" height="25rpx"></u-image>
								<u-text :text="'车内'+carInfo.indoorTemperature+'℃/车外'+carInfo.outdoorTemperature+'℃'"
									size="12"></u-text>
							</view>
							<view style="display: flex; align-items: center;">
								<u-image src="@/static/desktop/quantity.png" width="25rpx" height="25rpx"></u-image>
								<u-image src="@/static/desktop/quantity2.png" width="25rpx" height="10rpx"></u-image>
								<u-text :text="carInfo.remainingMileage+'KW'" size="12"></u-text>
							</view>
						</u-col>
						<u-col>
							<view class="car_status">
								<up-text text="车况检测良好" size="10" margin="5rpx 25rpx" color="#FFF"></up-text>
							</view>
							<u-image src="@/static/desktop/car.png" width="150rpx" height="70rpx" mode="widthFix"
								style="position: absolute;right: 1rpx;bottom: 10rpx;"></u-image>
						</u-col>
					</u-col>
					<u-col class="appList" style="flex-direction: row;" justify="around">
						<view style="width: 90%; display: flex; justify-content: space-around;">
							<view v-for="(i,index) in showApp" class="app" @click="open(i,index)"
								@longpress="longpress(i,index)">
								<up-image :src="i.icon" width="40rpx" height="40rpx" v-show="i.icon"></up-image>
							</view>
						</view>
					</u-col>
				</u-col>
			</u-row>
		</template>
		<bottom></bottom>
		<u-popup :show="weatherPopup" @close="weatherPopup=false" mode="right"
			customStyle="width:350rpx;height:100%;background: url('../static/desktop/popup.png');background-repeat: no-repeat;background-size: 100% 100%;">
			<view style="margin: 30rpx;">
				<u-row justify="space-around">
					<u-col span="3" style="flex-direction: row;">
						<u-text :text="weatherInfo.currentTemperature+'°'" bold size="35" align="center"></u-text>
						<u-text :text="weatherInfo.weather" size="12" style="margin-top: 15rpx;"></u-text>
					</u-col>
					<u-col span="3" style="border-right: 2rpx solid black;">
						<u-image :src="baseUrl+weatherInfo.weatherIcon" width="50rpx" height="45rpx" mode="widthFix"
							style=" padding-right: 40rpx;"></u-image>
					</u-col>
					<u-col span="3">
						<u-text :text="weatherInfo.cityName" bold align="center"></u-text>
						<u-text :text="weatherInfo.maxTemperature+'℃/'+weatherInfo.minTemperature+'℃'" size="12"
							align="center"></u-text>
					</u-col>
				</u-row>
				<u-row justify="space-between" style="margin-top: 30rpx;">
					<u-col span="3.5" style="align-items: center;" v-for="i in nearlyWeather">
						<u-text :text="weekDay(i.date)" size="12" align="center"></u-text>
						<u-image :src="baseUrl+i.weatherIcon" width="50rpx" height="45rpx" mode="widthFix"
							style="margin: 10rpx 0;"></u-image>
						<u-text :text="i.maxTemperature+'℃/'+i.minTemperature+'℃'" size="12" align="center"></u-text>
					</u-col>
				</u-row>
				<u-row style="flex-wrap: wrap; margin-top: 20rpx;">
					<u-col span="6" class="humidity bgImg2">
						<view style="margin-top: 15rpx;">
							<u-text text="湿度" bold align="center"></u-text>
							<u-text :text="weatherInfo.humidity+'%'" size="12" align="center"></u-text>
						</view>
					</u-col>
					<u-col span="6" class="visibility bgImg2">
						<view style="margin-top: 15rpx;">
							<u-text text="可见度" bold align="center"></u-text>
							<u-text :text="weatherInfo.visibility+'km'" size="12" align="center"></u-text>
						</view>
					</u-col>
					<u-col span="6" class="windSpeed bgImg2">
						<view style="margin-top: 15rpx;">
							<u-text text="风速" bold align="center"></u-text>
							<u-text :text="weatherInfo.windSpeed+'km/h'" size="12" align="center"></u-text>
						</view>
					</u-col>
				</u-row>
			</view>
		</u-popup>
		<u-popup :show="AppPopup" @close="AppPopup=false" mode="center"
			customStyle="width:450rpx;height:70%;background: url('../static/desktop/popup.png');background-repeat: no-repeat;background-size: 100% 100%;">
			<u-row style="flex-wrap: wrap; width: 90%;">
				<u-col span="1" v-for="item in appList" style=" margin: 30rpx 30rpx 0 0;" @click="selected(item)">
					<view style="width: 100rpx;">
						<up-image :src="item.icon" width="50rpx" height="50rpx" style="align-items: center;"></up-image>
						<up-text :text="item.name" size="12" align="center"></up-text>
					</view>
				</u-col>
			</u-row>
		</u-popup>
		<u-action-sheet :actions="list" :show="menuShow" @close="menuShow=false" @select="jump"></u-action-sheet>
	</view>
</template>
<script>
	import calendarFormatter from 'lunar-calendar'
	import {
		selectCityById
	} from '@/config/api/weather.js'
	import {
		getMedia
	} from '@/config/api/media.js'
	import {
		getRechargeVehicle
	} from '@/config/api/car.js'
	import bottom from '../../components/bottom/index.vue'
	export default {
		components: {
			bottom
		},
		data() {
			return {
				loading:true,
				// 时间
				time: {
					year: "",
					month: "",
					day: "",
					hours: "",
					minutes: "",
				},
				//农历
				lunar: "",
				//天气信息
				weatherInfo: {},
				//近三天天气
				nearlyWeather: {},
				//自己ip地址
				baseUrl: uni.$u.http.config.baseURL,
				//天气弹出层状态
				weatherPopup: false,
				//空调信息
				airInfo: {
					status: false,
					temperature: 16
				},
				//音乐信息
				musicList: [{}],
				//当前音乐
				musicIndex: 0,
				//进度条
				lineProgress: 0,
				//音乐实例
				audio: "",
				//音乐状态
				songStatus: false,
				//车辆信息
				carInfo: {},
				//app弹出层状态
				AppPopup: false,
				//app列表
				appList: [{
					name: '应用市场',
					icon: '../../static/desktop/application.png',
					appUrl: '/pages/applicationMarket/index'
				}, {
					name: '360全景',
					icon: '../../static/desktop/360.png',
					appUrl: '/pages/panorama/index'
				}],
				//当前点击位置
				index: 0,
				//展示的app
				showApp: [{}, {}, {}, {}, {}],
				//长按菜单
				menuShow: false,
				list: [{
						name: '替换其APP',
						code: '1', // car weather
						fontSize: '20'
					},
					{
						name: '副屏启动',
						fontSize: '20'
					}
				],
				//选中的app
				app: {}
			}
		},
		mounted() {
			//实时获取时间
			const that = this
			setTimeout(function(){
				that.loading = false
			},3000)
			this.getNowDate()
			setInterval(function() {
				that.getNowDate()
			}, 1000)
			//获取天气
			selectCityById(13).then(res => {
				this.weatherInfo = res.rows[0]
				this.nearlyWeather = res.rows[0].weatherForecastList.splice(0, 3)
			})
			//创建音乐实例
			this.audio = uni.createInnerAudioContext()
			//获取音乐信息 2代表的是音乐
			getMedia(2).then(res => {
				this.musicList = res.rows
				this.audio.src = this.baseUrl + this.musicList[this.musicIndex].mediaUrl
			})
			//获取车辆信息
			getRechargeVehicle(1).then(res => {
				this.carInfo = res
			})
			//获取app
			if (uni.getStorageSync("app")) {
				this.showApp = uni.getStorageSync("app")
			}
		},
		methods: {
			//获取时间
			getNowDate() {
				const now = new Date();
				this.time.year = now.getFullYear(); // 获取年份  
				this.time.month = now.getMonth() + 1; // 获取月份（注意：月份从0开始，所以需要加1）  
				this.time.day = now.getDate(); // 获取日期  
				this.time.hours = now.getHours(); // 获取小时  
				// 获取分钟  
				if (now.getMinutes() < 10) {
					this.time.minutes = "0" + now.getMinutes();
				} else {
					this.time.minutes = now.getMinutes();
				}
				//转农历
				let date = calendarFormatter.solarToLunar(this.time.year, this.time.month, this.time.day)
				this.lunar = date.lunarMonthName + date.lunarDayName
			},
			//时间转星期
			weekDay(time) {
				let datelist = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
				return datelist[new Date(time).getDay()];
			},
			// 播放
			paly() {
				if (!this.songStatus) {
					this.audio.play()
					this.songStatus = true
					//进度条
					var that = this
					const timer = setInterval(function() {
						that.lineProgress = (Math.floor(that.audio.currentTime) / Math.floor(that.audio
							.duration)) * 100;
						if (that.audio.currentTime == that.audio.duration) {
							that.songStatus = false
							that.audio.pause()
							clearInterval(timer)
						}
					}, 1000)
				} else {
					this.audio.pause()
					this.songStatus = false
				}
			},
			//上一曲
			previous() {
				if (this.musicIndex > 0) {
					this.musicIndex -= 1
					this.audio.src = this.baseUrl + this.musicList[this.musicIndex].mediaUrl
					this.audio.play()
					this.songStatus = true
				} else {
					uni.$u.toast('没有更多了')
				}
			},
			// 下一曲
			next() {
				if (this.musicIndex < this.musicList.length - 1) {
					this.musicIndex += 1
					this.audio.src = this.baseUrl + this.musicList[this.musicIndex].mediaUrl
					this.audio.play()
					this.songStatus = true
				} else {
					uni.$u.toast('没有更多了')
				}
			},
			//点击添加框
			open(data, i) {
				if (this.showApp[i].name) {
					uni.redirectTo({
						url: data.appUrl
					})
					return
				}
				this.index = i
				this.AppPopup = true
			},
			//长按
			longpress(data, i) {
				this.app = data
				this.index = i
				this.menuShow = true
			},
			//选中APP
			selected(data) {
				let flag = false
				this.showApp.map(r => {
					if (r && r.name == data.name) return flag = true
				})
				if (flag) {
					uni.showToast({
						icon: 'none',
						title: '已存在，请重新选择'
					})
					return
				}
				this.showApp.splice(this.index, 1, data)
				uni.setStorageSync('app', this.showApp)
				this.AppPopup = false
			},
			//长按菜单选择
			jump(data) {
				if (data.name == '替换其APP') {
					this.AppPopup = true
					this.menuShow = false
				}
			},
			//跳转到车辆信息
			goToCarInfo() {
				uni.redirectTo({
					url: "/pages/vehicleInformation/index"
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		width: calc(100% - 30px);
		margin: 0 auto;
		padding-top: 30rpx;
	}

	.time {
		height: 100rpx;
		background-image: url('@/static/desktop/time.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.weather {
		height: 100rpx;
		background-image: url('@/static/desktop/weather.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.air {
		height: 100rpx;
		background-image: url('@/static/desktop/air_conditioning.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.music {
		height: 250rpx;
		background-image: url('@/static/desktop/music.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.bgImg {
		background-image: url('@/static/desktop/info.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.video {
		flex: 0 0 40% !important;

	}

	.info {
		flex: 0 0 75% !important;
		background-size: 100% 80%;
	}

	.carInfo {
		flex: 0 0 75% !important;
	}

	.car_status {
		width: 120rpx;
		height: 25rpx;
		position: absolute;
		top: 70rpx;
		right: 5rpx;
		background-image: url('@/static/desktop/good.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.appList {
		background-image: url('@/static/desktop/app.png');
		background-repeat: no-repeat;
		background-size: 95% 80%;
		flex: 0 0 25% !important;
	}

	.app {
		width: 40rpx;
		height: 40rpx;
		margin-top: 5rpx;
		background-image: url('@/static/desktop/add.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.bgImg2 {
		height: 80rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
	}

	.humidity {
		background-image: url('@/static/humidity.png');
	}

	.visibility {
		background-image: url('@/static/visibility.png');
	}

	.windSpeed {
		background-image: url('@/static/windSpeed.png');
	}
</style>